<template>
    <div class="toDoTasks">

        <div class="pageTitle" >
            待办
            <span class="close" @click="goHome()"></span>
        </div>


        <div class="recentPlan">
            <ul class="box">
                <li style="marginBottom:10px">
                <span style="fontSize:25px">近期计划</span>
                <span style="fontSize:35px" @click="addPlan">+</span>
                </li>
                <li>
                <span>计划1</span>
                <span>
                    截止时间 
                    <span class="endTime">2025.5.1</span>
                </span>
                <span>
                    剩余
                    <span class="remainTime">1 周</span>
                </span>
                </li>
                <li>
                <span>计划1</span>
                <span>
                    截止时间
                    <span class="endTime">2025.5.1</span>
                </span>
                <span>
                    剩余
                    <span class="remainTime">1 周</span>
                </span>
                </li>

                <li>
                <span>计划1</span>
                <span>
                    截止时间
                    <span class="endTime">2025.5.1</span>
                </span>
                <span>
                    剩余
                    <span class="remainTime">1 周</span>
                </span>
                </li>
                
            </ul>
        </div>

   
         <div class="coreTask">
            <div class="title">今日核心任务</div>
            <ul>
                <li>
                    <div class="check">
                        <div>口</div>
                        <div class="content">
                            <span>7:00 - 8:00</span>
                            <span>晨跑</span>
                        </div>

                    </div>

                    <img class="eye" :src="eye2" alt="">
                </li>
                <li class="add">
                    +添加
                </li>
            </ul>
        </div>

        <div class="toDoList">
            <div class="title">今日待办</div>
            <ul>
                 <li>
                    <div class="check">
                        <div>口</div>
                        <div class="content">
                            <span>7:00 - 8:00</span>
                            <span>晨跑</span>
                        </div>

                    </div>
                    <img class="eye" :src="eye2" alt="">
                </li>
                 <li>
                   <div class="check">
                        <div>口</div>
                        <div class="content">
                            <span>7:00 - 8:00</span>
                            <span>晨跑</span>
                        </div>

                    </div>
                    <img class="eye" :src="eye2" alt="">
                </li>
                <li class="add">
                    +添加
                </li>
            </ul>

        </div>


        <div class="timeTrack">
            <div class="title">时间轨迹</div>
            <img class="timeImg" :src="timeLine" alt="">
        </div>
    </div>


    
  <a-drawer
    title="新增计划"
    placement="top"
    :closable="true"
    v-model:visible="showRecentPlanForm"
    :after-visible-change="afterVisibleChange"
    width="100%"
    height="100%"
    drawerStyle="background-color:#fae9b6;"
  >
    <div class="drawer">
        <div class="confirm-btn">
            确定
        </div>

      
        
        <!-- 
        :rules="rules"
         -->
        <!-- layout="horizontal" -->
        <!-- layout="vertical" -->


        <div class="formBox">

       
        <a-form
            class="plan-form"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
            :model="formState"
            ref="formRef"
            layout="horizontal"
        >

            <a-form-item label="名称:：" name="name">
                <a-input  />
            </a-form-item>
            <a-form-item label="持续时长:：" name="time">
                <a-input class="timeInput"  /> 周
            </a-form-item>

        <!-- <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
            <a-button type="primary" @click="onSubmit">Create</a-button>
            <a-button style="margin-left: 10px" @click="resetForm">Reset</a-button>
        </a-form-item> -->
        </a-form>

        <div class="addItem">
            √
        </div>

        </div>

  
        <div class="selectInput">
            <a-tag v-for="(item,index) in checkedList" :key="index"  closable @close="log" >
                {{item}}
                <span class="icon">1周</span>
            </a-tag>
        </div>

        <div class="tmplateTitle">模板列表</div>

        <a-tabs tabBarGutter="5" type="card" v-model:activeKey="activeKey">
            <a-tab-pane key="1" tab="重启计划">
                <a-checkbox-group  @change="checkedListChange" v-model:value="checkedList" :options="plainOptions" />
            </a-tab-pane>
            <a-tab-pane key="2" tab="其他" force-render>
                111
            </a-tab-pane>
           
        </a-tabs>

    </div>
   
  </a-drawer>
    
</template>

<script setup lang="ts">

import {useRouter} from 'vue-router'

import {ref,reactive} from 'vue'

import eye2 from '@/assets/imgs/eye2.png'
import timeLine from '@/assets/imgs/timeLine.png'

const headerStyle = {
    backgroundColor:'#fae9b6',
    color:'blue !important',
}

const router = useRouter()


const showRecentPlanForm = ref(false );

const checkedList = ref()
const plainOptions = reactive(['放松一天', '备战专业知识', '整理当前岗位的专业要求']);
const  activeKey = ref('1')


const formState = reactive({
    name: '',
    region: undefined,
    date1: undefined,
    delivery: false,
    type: [],
    resource: '',
    desc: '',
});

const labelCol = ref({span:8})
const wrapperCol = ref({span:15,offset:1})

const checkedListChange =(e)=>{
    console.log('切换状态了',e,checkedList.value)
}


const goHome=()=>{
    router.push('/home')
}


const addPlan=()=>{
  showRecentPlanForm.value = true
}

</script>



<style lang="less" scoped>



.toDoTasks{
    padding: 15px;
    min-height: calc(100vh - 30px);
    display: flow-root;
    box-sizing: border-box;

    padding-left: 35px;
    border-left: 2px solid;
    background: url('@/assets/imgs/bookLoop.png');
    background-repeat: repeat-y;
    background-size: 25px;

    .pageTitle{
        font-size: 30px;
        .close{
            position:absolute;
            top:0;
            right: 0;
            border-left: 50px solid transparent ;
            border-bottom: 50px solid transparent ;
            border-right: 50px solid  #e0ddd7;
        }
    }


    .recentPlan{
        
        font-size: 17px;
        width: 100%;

        .box{
        display: flex;
        flex-direction: column;
        li{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            
            .endTime,
            .remainTime{
            background:#fff8de;
            padding: 2px 8px;
            }
        }
        }
    }

    .coreTask,
    .toDoList,
    .timeTrack{
        .title {
            text-align: left;
            font-size: 25px;
            padding-top: 10px;
        }
        ul{
            position: relative;
            display: flex;
            flex-direction: column;
            gap: 10px;

            li{
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                box-sizing: border-box;
                width: 100%;
                background: #fff8de;
                padding: 5px 10px;

                .check{
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                }

                .eye{
                    width: 30px;
                }

                .content{
                    display: flex;
                    flex-direction: column;
                    text-align: left;
                    margin-left: 15px;
                }
            }

            .add{
                display: block;
                text-align: center;
            }
        }

        .timeImg{
            width: 100%;
        }
    }
}


.drawer{
    box-sizing: border-box;
    min-height: 100%;
    display: flex;
    flex-direction: column;

    .confirm-btn{
        text-align: right;
        font-size: 18px;
        padding: 10px 0;
    }

    .formBox{
        position:relative;
        height:100%;
        display: flex;
        flex-direction: row;
        

    }



    .plan-form{
        width: 80%;
        .timeInput{
            width: 75%;

        }

        input{
            background-color:transparent;
            border:solid 1px;
            height: calc(var(--primary-font-size) * 1.2);
        }
        .ant-form-item{
             margin:0;
        }
    }
    .addItem{
        width: 20%;
        font-size: calc(var(--primary-font-size) + 3px);
        font-weight: bolder;
        height: 100%;
        align-self: flex-end;
        text-align: center;
    }
        
    .selectInput{
        border: solid black 1px;
        font-size: var(--primary-font-size);
        padding: 5px 0;
        margin-top: 15px;
        min-height: 20px;
        background-color: #f6e7be;

        .icon{
            background-color: rgb(222, 243, 250);
        }
    }

        
    .tmplateTitle{
        margin: 30px 0 20px;
    }
}

</style>

<style lang='less'>

:root{
    --primary-font-size:15px;
}

.ant-drawer-content{
    font-size: var(--primary-font-size);

}

.ant-drawer-header{
    .ant-drawer-title{
        text-align: center;
    }
   
}

@media (max-width:575px){
    .ant-col-8{
        max-width: 33.33% !important;
        text-align: right !important;
    }
    .ant-col-15{
        max-width: 50% !important;
    }

    .drawer{
        .addItem{
            padding-bottom:8px;
        }
    }

}

    .ant-form-item-label >label{
        &::after{
            content: none !important;
        }
    }


.ant-col-8 > label,
.ant-col-15{
    font-size:var(--primary-font-size) !important;
}



.ant-tag{
    font-size: var(--primary-font-size);
    box-sizing: border-box;
    line-height: normal;
    color: black;
    background-color: #fef7dd;
    .anticon{
        font-size: var(--primary-font-size);
    }
}




.ant-tabs {
    flex-grow: 1;
    .ant-tabs-nav{
        margin:0;
        .ant-tabs-tab{
            font-size: var(--primary-font-size);
            border:solid 1px;
            background-color: #f7e6b9;
            border-bottom: none;

        }

        .ant-tabs-tab-active{
            background-color: #f5da91;
            border:solid 1px black;
            border-bottom:none;

            .ant-tabs-tab-btn{
                color:#4e5255;
            }


        }
    }

    .ant-tabs-content-holder{
        border: solid black 1px;

        padding:10px;  
            .ant-checkbox-wrapper{
                font-size: var(--primary-font-size);

                .ant-checkbox-inner{
                    position: relative;
                    width: 20px;
                    height: 20px;
                    border:solid 1px;
                    background-color: transparent;
                    
                    &:after{
                        width: 25%;
                        height: 50%;
                        border-color: black;
                    }
                    
                }
            }
    }
}

</style>